<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ymbxCloud</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .file-drop-active {
                @apply border-primary bg-primary/5;
            }
            .hover-scale {
                @apply hover:scale-[1.02] transition-all duration-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-cloud text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">文件管理系统</h1>
            </div>
            
            <div class="flex items-center space-x-4">
                <nav class="hidden md:flex space-x-6">
                    <a href="#" class="text-dark hover:text-primary transition-all-300 flex items-center">
                        <i class="fa fa-home mr-1"></i> 首页
                    </a>
                    <a href="#" class="text-primary font-medium flex items-center">
                        <i class="fa fa-folder mr-1"></i> 文件
                    </a>
                    <a href="#" class="text-dark hover:text-primary transition-all-300 flex items-center">
                        <i class="fa fa-line-chart mr-1"></i> 统计
                    </a>
                </nav>
                
                <div class="flex items-center space-x-3">
                    <button id="notifications-btn" class="relative p-2 text-dark hover:text-primary transition-all-300">
                        <i class="fa fa-bell-o text-lg"></i>
                        <span class="absolute top-0 right-0 h-4 w-4 bg-red-500 rounded-full flex items-center justify-center text-white text-xs">3</span>
                    </button>
                    
                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <div class="h-9 w-9 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="hidden md:block">
                            <p class="text-sm font-medium text-dark">张小明</p>
                            <p class="text-xs text-gray-500">普通用户</p>
                        </div>
                        <i class="fa fa-angle-down text-gray-500 group-hover:rotate-180 transition-transform duration-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 面包屑导航 -->
        <div class="mb-6 text-sm">
            <nav class="flex" aria-label="面包屑">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="#" class="inline-flex items-center text-gray-600 hover:text-primary">
                            <i class="fa fa-home mr-1"></i>
                            首页
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <i class="fa fa-angle-right text-gray-400 mx-1"></i>
                            <a href="#" class="text-gray-600 hover:text-primary">我的文件</a>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>

        <!-- 页面标题和操作区 -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
            <div>
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">文档</h2>
            </div>
            
            <div>
                <form class="w-full max-w-md space-y-5" action="/upload" method="post">
                    <label for="file-input" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg inline-flex items-center cursor-pointer transition-all-300 shadow-sm hover:shadow">
                        <i class="fa fa-plus mr-2"></i>
                        <span>上传文件</span>
                    </label>
                    <input id="file-input" type="file" multiple class="hidden">
                    <label for="file-input" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg inline-flex items-center cursor-pointer transition-all-300 shadow-sm hover:shadow">
                        <i class="fa fa-plus mr-2"></i>
                        <span>新建文件夹</span>
                    </label>
                    <input id="file-input" type="file" multiple class="hidden">
                </form>
            </div>
        </div>


        <!-- 文件列表 -->
        <div class="bg-white rounded-xl shadow-sm p-4 mb-8">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4 pb-3 border-b border-gray-100">
                <div class="flex items-center space-x-4">
                    <div class="flex items-center space-x-2">
                        <input type="checkbox" class="rounded text-primary focus:ring-primary">
                        <span class="text-sm text-gray-500">全选</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <button class="text-gray-500 hover:text-primary transition-all-300" title="下载">
                            <i class="fa fa-download"></i>
                        </button>
                        <button class="text-gray-500 hover:text-primary transition-all-300" title="移动">
                            <i class="fa fa-cut"></i>
                        </button>
                        <button class="text-gray-500 hover:text-primary transition-all-300" title="复制">
                            <i class="fa fa-copy"></i>
                        </button>
                        <button class="text-gray-500 hover:text-red-500 transition-all-300" title="删除">
                            <i class="fa fa-trash-o"></i>
                        </button>
                    </div>
                </div>
                
            </div>
            
            <!-- 文件表格 -->
            <table class="w-full divide-y divide-gray-200">
                <thead>
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <input type="checkbox" class="rounded text-primary focus:ring-primary">
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">大小</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">修改日期</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <!-- 文件项1 -->
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <input type="checkbox" class="rounded text-primary focus:ring-primary">
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="h-8 w-8 rounded bg-blue-100 flex items-center justify-center text-blue-500 mr-2">
                                    <i class="fa fa-file-pdf-o text-lg"></i>
                                </div>
                                <span class="text-sm font-medium text-dark">项目计划书.pdf</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.4MB</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm space-x-2">
                            <button class="text-gray-400 hover:text-primary transition-all-300" title="预览">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button class="text-gray-400 hover:text-primary transition-all-300" title="下载">
                                <i class="fa fa-download"></i>
                            </button>
                            <button class="text-gray-400 hover:text-primary transition-all-300" title="更多">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-100 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <i class="fa fa-cloud text-primary text-xl"></i>
                    <span class="text-dark font-medium">文件管理系统</span>
                </div>
                
                <div class="text-sm text-gray-500">
                    &copy; 2023 文件管理系统. 保留所有权利.
                </div>
                
                <div class="flex space-x-4 mt-4 md:mt-0">
                    <a href="#" class="text-gray-500 hover:text-primary transition-all-300">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-all-300">
                        <i class="fa fa-gitee text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 上传进度模态框 -->
    <div id="upload-progress-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl p-6 w-full max-w-md shadow-lg">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-dark">上传进度</h3>
                <button id="close-upload-modal" class="text-gray-400 hover:text-gray-600 transition-all-300">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <div class="space-y-4">
                <div class="upload-item">
                    <div class="flex items-center justify-between mb-1">
                        <div class="flex items-center">
                            <div class="h-8 w-8 rounded bg-blue-100 flex items-center justify-center text-blue-500 mr-2">
                                <i class="fa fa-file-pdf-o"></i>
                            </div>
                            <span class="text-sm font-medium">项目计划书.pdf</span>
                        </div>
                        <span class="text-xs text-gray-500">75%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
                    </div>
                </div>
                
                <div class="upload-item">
                    <div class="flex items-center justify-between mb-1">
                        <div class="flex items-center">
                            <div class="h-8 w-8 rounded bg-green-100 flex items-center justify-center text-green-500 mr-2">
                                <i class="fa fa-file-excel-o"></i>
                            </div>
                            <span class="text-sm font-medium">财务报表.xlsx</span>
                        </div>
                        <span class="text-xs text-gray-500">30%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-primary h-2 rounded-full" style="width: 30%"></div>
                    </div>
                </div>
                
                <div class="upload-item">
                    <div class="flex items-center justify-between mb-1">
                        <div class="flex items-center">
                            <div class="h-8 w-8 rounded bg-purple-100 flex items-center justify-center text-purple-500 mr-2">
                                <i class="fa fa-file-word-o"></i>
                            </div>
                            <span class="text-sm font-medium">会议记录.docx</span>
                        </div>
                        <span class="text-xs text-green-500">已完成</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div>
                    </div>
                </div>
            </div>
            
            <div class="mt-6 flex justify-end">
                <button id="cancel-upload-btn" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-dark rounded-lg transition-all-300">
                    取消上传
                </button>
            </div>
        </div>
    </div>

    
</body>
</html>    